<template>
  <div id="app">
    <!-- <router-link to="/home" tag="button" replace>首页</router-link> 
    <router-link to="/about" tag="button" replace>关于</router-link> 
    <router-link to="/user" tag="button" replace>用户</router-link>  -->
    <router-link to="/home"  replace>首页</router-link>
    <router-link to="/about"  replace>关于</router-link>
    <router-link :to="'/user/' + username"  replace
      >用户</router-link
    >
    <!-- <router-link :to="profiledata" tag="button" replace>档案</router-link> -->
    <button @click="profileClick()">档案</button>

    <!-- <button @click="homeClick()">首页</button> -->
    <!-- <button @click="aboutClick()">关于</button> -->
    <keep-alive><router-view></router-view></keep-alive>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      username: "lisi",
      profiledata: {
        path: "/profile",
        query: {
          name: "你的名字",
          age: 18,
        },
      },
    };
  },
  methods: {
    // homeClick() {
    //   //通过代码修改
    //   this.$router.push('/home')
    //   console.log("homeClick");
    // },
    // aboutClick() {
    //   this.$router.push('/About')
    //   console.log("aboutClick");
    // },
    profileClick(){
      this.$router.push(this.profiledata)
    }
  },
};
</script>

<style>
.active {
  color: red;
}
</style>
